<template>
  <van-nav-bar title="我的订单" left-arrow @click-left="onBack" />

  <!-- 标签 -->
  <van-tabs v-model:active="active" @change="onTab">
    <van-tab
      v-for="item in tarList"
      :title="item.title"
      :name="item.name"
      :key="item.name"
    >
    </van-tab>
  </van-tabs>

  <!-- 订单列表 -->
  <div class="list-box" v-if="OrderList.length > 0">
    <div class="list">
      <!-- 一个item代表一个订单 -->
      <div class="item" v-for="item in OrderList" :key="item.id">
        <div class="header">
          <div class="left">
            订单号：<span>{{ item.code }}</span>
          </div>
          <div class="right">{{ item.status_text }}</div>
        </div>
        <div class="content">
          <van-card
            v-for="son in item.OrderProduct"
            :key="son.id"
            :num="son.nums"
            :price="son.total"
            desc="描述信息"
            :title="son.products.name"
            :thumb="son.products.cover_cdn"
          >
            <template #desc>
              <span>商品单价：￥{{ son.price }}</span>
            </template>
          </van-card>
        </div>
        <div class="footer">
          <div class="date">{{ item.createtime_text }}</div>
          <div class="btn">
            <van-button
              type="primary"
              size="mini"
              color="#7232dd"
              :to="{ path: '/order/order/info', query: { orderid: item.id } }"
              >订单详情</van-button
            >
            <!-- <van-button
              type="primary"
              size="mini"
              v-if="item.status >= 1 && item.status <= 4"
              >申请售后</van-button
            > -->
            <van-button type="primary" size="mini" v-if="item.status == 0"
              >确认支付</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="(item.status >= 2 && item.status <= 4) || item.status < 0"
              :to="{
                path: '/order/order/express',
                query: { orderid: item.id },
              }"
              >查看物流</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 2"
              @click="onConfirm(item.id)"
              >确认收货</van-button
            >
            <van-button
              type="primary"
              size="mini"
              v-if="item.status == 3"
              @click="toRate(item.id)"
              >立即评价</van-button
            >
            <van-button
              type="danger"
              size="mini"
              v-if="item.status == 4"
              @click="onDel(item.id)"
              >删除订单</van-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-empty description="暂无订单" v-else />
</template>
<script>
import { showNotify, showConfirmDialog } from "vant";
export default {
  created() {
    this.LoginAuth = this.$cookies.get("LoginAuth")
      ? this.$cookies.get("LoginAuth")
      : {};

    this.getOrderData();
  },
  data() {
    return {
      active: "",
      tarList: [
        {
          title: "全部",
          name: "",
        },
        {
          title: "已完成",
          name: 4,
        },
        {
          title: "待支付",
          name: 0,
        },
        {
          title: "待发货",
          name: 1,
        },
        {
          title: "待收货",
          name: 2,
        },
        {
          title: "待评价",
          name: 3,
        },
        {
          title: "退货中",
          name: -2,
        },
        {
          title: "已退货",
          name: -1,
        },
        {
          title: "退货被拒",
          name: -3,
        },
      ],
      OrderList: [],
      LoginAuth: {},
    };
  },
  methods: {
    onBack() {
      this.$router.push("/business/base/index");
    },
    onTab(value) {
      this.getOrderData();
    },
    async getOrderData() {
      let data = {
        busid: this.LoginAuth.id,
      };

      if (this.active !== "") {
        data.status = this.active;
      }

      let result = await this.$api.OrderIndex(data);

      if (result.code === 1) {
        this.OrderList = result.data;
      }
    },
    onConfirm(orderId) {
      showConfirmDialog({
        title: "确认收货",
        message: "您确认收到货吗？",
      })
        .then(async () => {
          let result = await this.$api.OrderIndex({ orderId });

          // console.log(result);

          if (result.code === 1) {
            showNotify({
              type: "success",
              message: "已确认收货",
              duration: 1500,
            });
          }
          this.getOrderData();
        })
        .catch(() => {});
    },
    onDel(orderid) {
      // console.log(orderid);
      showConfirmDialog({
        title: "删除订单",
        message: "您确认删除订单吗？",
      })
        .then(async () => {
          let result = await this.$api.OrderDel({ orderid });

          // console.log(result);

          if (result.code === 1) {
            showNotify({
              type: "success",
              message: "删除成功",
              duration: 1500,
            });
          }
          this.getOrderData();
        })
        .catch(() => {});
    },
    toRate(orderid) {
      this.$router.push({ path: "/order/order/rate", query: { orderid } });
    },
  },
};
</script>

<style>
.list-box {
  background: #ccc;
}

.list-box .header {
  display: flex;
  justify-content: space-between;
  /* padding: 0 10px; */
}

.list .item .left span {
  font-size: 14px;
  font-weight: bold;
}

.item {
  padding: 5px 5px 3px;
  background: #fff;
  margin-bottom: 5px;
}

.item .header .left {
  font-size: 13px;
}

.item .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item .footer .date {
  font-weight: bold;
}
</style>